<template>
    <div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="基础信息" name="Datas">

                <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm page-form">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="检验编号" prop="Number">
                                <el-input v-model="model.Number" placeholder="请输入检验编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="检验名称" prop="Name">
                                <el-input v-model="model.Name" placeholder="请输入检验名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="检验数量" prop="Quantity">
                                <el-input-number v-model="model.Quantity" :min="1"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="检验方式" prop="Method">
                               <el-select v-model="model.Method" placeholder="请选择检验方式">
                                    <el-option label="全检" value="全检"></el-option>
                                    <el-option label="抽检" value="抽检"></el-option>
                                    <el-option label="批量检" value="批量检"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                       
                        <el-col :span="8">
                            <el-form-item label="检验版本" prop="Version">
                               <el-input v-model="model.Version" placeholder="请输入版本"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="是否启用" prop="EnableFlag" label-width="120px">
                                <el-radio-group v-model="model.EnableFlag">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="合格条件" prop="InspectCondition">
                                <el-input v-model="model.InspectCondition" placeholder="请输入合格条件"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="检验方案" prop="InspectScenario">
                                <el-input v-model="model.InspectScenario" placeholder="请输入检验方案"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="工艺标准" prop="RouteStandard">
                               <el-input v-model="model.RouteStandard" placeholder="请输入工艺标准"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    

                        

                    <el-row>
                         <el-col :span="8">
                            <el-form-item label="产品编号" prop="ItemCode">
                               <el-input v-model="model.ItemCode" placeholder="请选择产品编号" :readonly="true" @focus="SelecteItem"></el-input>
                            </el-form-item>
                        </el-col>

                         <el-col :span="8">
                            <el-form-item label="产品分类" prop="ProductType">
                                <el-input v-model="model.ProductType" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>

                         <el-col :span="8">
                            <el-form-item label="产品名称" prop="ItemName">
                                <el-input v-model="model.ItemName" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                        
                     </el-row>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="BOO组成" name="BOM">


                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addBom" size="small">新增</el-button>
                    <el-button  type="danger" plain icon="el-icon-delete" size="small" @click="delBom">删除</el-button>
                </div>


                <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column  prop="ProjectName" label="检测名称" :show-overflow-tooltip="true"></el-table-column>                    
                    <el-table-column prop="Classify" label="分类" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Device" label="检测器具" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="StandValue" label="标准数值" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="StandUnit" label="标准单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Remark" label="描述" :show-overflow-tooltip="true"></el-table-column>

                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>


        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>


        <!-- 弹窗 -->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
            :visible.sync="dialogDomain.dialogVisible" width="60%" >
            <SelecteItem @callback="SelecteItemCallback" :IsFirst="true"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 0" />
            <SelecteQcProhect @callback="QcProhectCallback"  :BomList="tableData"
                v-if="dialogDomain.dialogVisible && dialogDomain.dialogType == 1" />
            
        </el-dialog>

        
 
    </div>
</template>



<script>
import SelecteItem from '@/views/Product/ProductView/components/ProductBomInput.vue';
import SelecteQcProhect from './SelecteQcProhect.vue';

export default {
    components: {
        SelecteItem,
        SelecteQcProhect,
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            activeName: 'Datas',

            //检测项目数据
            tableData: [],

            isLoading: false,
            
            //对话框对象
            dialogDomain: {
                title: '物料产品选择',
                dialogVisible: false,
                dialogType: 0  //0选择类别  1选择BOM
            },

            rules: {
                Quantity: { required: true, message: '请添加检验数量', trigger: 'blur' },
                Number: { required: true, message: '请输入检验编码', trigger: 'blur' },
                Name: { required: true, message: '请输入检验名称', trigger: 'blur' },
                Method: { required: true, message: '请选择检验方式'},
                ItemCode: { required: true, message: '请选择产品'},
                Version: { required: true, message: '请输入检验版本', trigger: 'blur' },
                ProcessCode: { required: true, message: '请选择工序编号'},
            }
        }
    },
    //实例生命周期
    created() {
        this.GetQcReceiveStandardItemById(this.model.Id);
    },
    methods: {
        //选择产品
        SelecteItem() {
            this.dialogDomain.title = "选择产品";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 0;
        },
        //添加检测项目
        addBom() {
            this.dialogDomain.title = "选择";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 1;
        },
        delBom(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },
        //删除产品BOM组成
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },

        //立即创建 或 保存
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        //重置
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            this.$http.postForm('/api/QcReceiveStandard', { model: this.model,QcReceiveStandardItem:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },
        //修改
        put() {
            this.$http.putForm('/api/QcReceiveStandard', { model: this.model,QcReceiveStandardItem:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },

        GetQcReceiveStandardItemById(Id) {
            this.isLoading=true;
            this.$http.get('/api/QcReceiveStandard/GetQcReceiveStandardItemById',{
                params:{
                    Id:Id
                }
            })
            .then(res => {
                this.tableData = res.Data;
                console.log(res);
                this.isLoading=false;
            })
        },

        
        

        //选择产品回调
        SelecteItemCallback(model){
            this.model.ItemId = model.Id,
            this.model.ProductType=model.ItemTypeName,
            this.model.ItemCode = model.ItemCode,
            this.model.ItemName = model.ItemName,
            this.dialogDomain.dialogVisible = false;
        },

        //选择检测项目回调
        QcProhectCallback(){
            this.dialogDomain.dialogVisible = false;
        },

        


    }
}
</script>
 